.task-container {
    padding: 2rem 1rem 7rem;
    min-height: 100vh;
    box-sizing: border-box;
    background: url("../images/home_bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .main-content-box {
        border-radius: 2.4rem;
        padding-bottom: 1rem;
        background-color: $purpleBg;
        box-shadow: 0 0.2rem 0.6rem 0 #895bc9;

        .banner-box {
            img {
                width: 100%;
            }
        }

        .task-list-box {
            margin: 1.2rem 1.2rem 0;
            border-radius: 2.4rem;
            padding: .6rem 0;
            background-color: #fff;
            overflow-y: auto;
            .item {
                padding: .4rem 1rem;

                .item-box {
                    @include flex-center-between();
                    border-radius: 2.4rem;
                    background: linear-gradient(to bottom, #faf5ff 0, #e6d5ff 20%, #b78cf6 90%, #a773f3 94%);
                    border: 1px solid $purpleBorderOne;

                    .photo-box {
                        width: 5.4rem;
                        height: 5.4rem;
                        @include flex-center-center();
                        background: url("../images/task_item_left1.png");
                        background-size: 100% 100%;
                        background-repeat: no-repeat;

                        img {
                            width: 4rem;
                            height: 4rem;
                        }
                    }

                    .centre {
                        flex: 1;
                        padding-right: .4rem;
                        .title{
                            margin-left: 1rem;
                            height: 2rem;
                            line-height: 2rem;
                            font-size: 1.2rem;
                            color: $purpleFontTwo;
                        }
                        .min-group {
                            @include flex-center-between();
                            margin-top: .2rem;
                            .min-item {
                                flex: 1;
                                margin-left: 1rem;
                                @include flex-center-start();
                                height: 2rem;
                                padding: 0 .2rem;
                                border-radius: 1rem;
                                background-color: $purpleFontTwo;
                                box-shadow:inset 0px 1px 4px 0px rgba(0,0,0,.5); 
                                border-bottom: 1px solid rgba(255,255,255,.8);
                                color: #fff;
                                .icon {
                                    margin-top: .1rem;
                                    width: 1.8rem;
                                    height: 1.8rem;
                                }
                                .icon2 {
                                    margin-top: .1rem;
                                    margin-left: .1rem;
                                    width: 1.6rem;
                                    height: 1.6rem;
                                }
                                .value{
                                    margin-left: .4rem;
                                    font-size: 1rem;
                                }
                            }
                        }
                    }

                    .arrow {
                        width: 5.4rem;
                        height: 5.4rem;
                        @include flex-center-center();

                        img {
                            width: 2rem;
                            height: 2rem;
                        }
                    }

                }
            }
        }

        .firend-list-box{
            .title-box{
                height: 4rem;
                line-height: 4rem;
                text-align: center;
                font-size: 2rem;
                font-weight: bold;
                color: $blueFontOne;
            }
            .item {
                padding: .4rem 1rem;
                .item-box {
                    background: linear-gradient(to bottom, #f2fbfe 0, #b4f8f8 20%, #48d5d4 90%, #34cccb 94%);
                    border: 1px solid $blueBorderOne;
                    .photo-box {
                        background: url("../images/task_item_left2.png");
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        img {
                            width: 100%;
                            height: 100%;
                            border-radius: 2.4rem 0 0 2.4rem;
                        }
                    }
                    .centre {
                        flex: 2;
                        flex-basis: 1;
                        flex-shrink: 1;
                        .title{
                            color: $blueFontTwo;
                        }
                        .min-group {
                           
                            .min-item {
                                background-color: $blueBg;
                                .other{
                                    margin-left: .6rem;
                                    font-size: 1rem;
                                    color: $blueFontThree;
                                }
                            }
                        }
                    }
                    .prices{
                        @include flex-center-center();
                        flex: 1;
                        height: 5.4rem;
                        img {
                            width: 2.4rem;
                            height: 2.4rem;
                        }
                        .value{
                            padding: 0 .8rem 0 .2rem;
                            font-size:1.4rem;
                            color: $blueFontTwo;
                        }
                    }
                }
            }
        }
    }
    .bottom-btn-box{
        @include flex-center-center();
        padding-top: 1rem;
        .btn-bg{
            padding: 0.2rem;
            width: 15rem;
            height: 5rem;
            line-height: 4.6rem;
            text-align: center;
            background: url(../images/earn_run_btn.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center center;
            font-size: 2rem;
            font-weight: bold;
            color: #fff;
            text-shadow: 0 2px 2px #a84f01;
        }
        .btn-img{
            width: 5rem;
            height: 5rem;
            img{
                width: 100;
                height: 100%;
            }
        }
    }
}